<template>
	<view class="succeed">
		<view class="header_hint">
			<image src="@/static/image/time.png"></image>
			<view class="title">本期匹配结果公布时间</view>
			<view>{{!succes.is_stop?succes.announce_time:"假期结束之后！"}}</view>
		</view>
		<view class="frame_box">
			<view class="succ_icon">
				<image src="@/static/image/succ.png"></image>
			</view>
			<view class="succ_content">
				<view class="header_text">
					<view class="title">
						<view>恭喜，报名成功！</view>
						<view>Registration succeeded</view>
					</view>
					<image src="@/static/image/ye.png"></image>
				</view>
				<view class="assistant">
					<view v-if="succes" class="img_code">
						<image :src="succes.help_qr"></image>
						<view>重要</view>
					</view>
					<view class="text">
						<view>请扫码添加小助手及时接收匹配结果</view>
					</view>
				</view>
			</view>
		</view>
		<view class="message">
			<view class="my_data" @click="headleMy">
				<view class="title">
					<view>我的资料</view>
					<view>My information</view>
				</view>
				<image src="@/static/image/ri.png"></image>
			</view>
			<view class="my_data" @click="headleRecord">
				<view class="title">
					<view>报名记录</view>
					<view>Registration record</view>
				</view>
				<image src="@/static/image/ri.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				succes: null
			}
		},
		onLoad() {
			this.$myRequesy({
				url: 'succes-info'
			}).then(res => {
				if (res.code === 0) {
					this.succes = res.data
				}
			})
		},
		methods: {
			// 跳转到我的资料
			headleMy() {
				uni.navigateTo({
					url: '/pages/myprofile/myprofile'
				})
			},
			headleRecord() {
				uni.navigateTo({
					url: '/pages/record/record'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.succeed {
		padding: 0upx 40upx 122upx;

		.header_hint {
			display: flex;
			justify-content: center;
			margin: 40upx auto;
			color: rgba(0, 0, 0, 0.35);
			font-size: 14px;

			image {
				width: 40upx;
				height: 40upx;
			}

			.title {
				margin: 0upx 8upx 0upx 10upx;
			}

			view:last-child {
				color: rgba(130, 113, 239, 100);
			}
		}

		.frame_box {
			width: 100%;
			height: 980upx;
			background-color: rgba(248, 247, 254, 100);
			border-radius: 30upx;

			.succ_icon {
				width: 100%;
				height: 350upx;
				border-radius: 15px 15px 0px 0px;
				background-color: rgba(158, 149, 237, 100);
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 290upx;
					height: 290upx;
				}
			}

			.succ_content {
				padding: 50upx 52upx 52upx 50upx;

				.header_text {
					width: 100%;
					display: flex;
					justify-content: space-between;
					color: rgba(0, 0, 0, 0.35);
					border-bottom: 2upx solid rgba(130, 113, 239, 0.10);
					padding-bottom: 40upx;

					.title {
						font-size: 26upx;

						view:first-child {
							color: rgba(130, 113, 239, 100);
							font-size: 36upx;
							font-weight: 600;
							margin-bottom: 12upx;
						}
					}

					image {
						width: 88upx;
						height: 88upx;
						border-radius: 50%;

					}
				}


			}

			.assistant {
				width: 100%;
				margin-top: 50upx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.img_code {
					width: 250upx;
					height: 250upx;
					border-radius: 16upx;
					position: relative;
					margin: 0 auto;
					border: 2upx solid rgba(130, 113, 239, 0.30);
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 30upx;

					image {
						width: 95%;
						height: 95%;
						border-radius: 16upx;
					}

					view {
						position: absolute;
						width: 72upx;
						height: 40upx;
						border-radius: 40upx;
						background-color: rgba(37, 219, 180, 100);
						color: rgba(255, 255, 255, 100);
						font-size: 24upx;
						line-height: 40upx;
						text-align: center;
						top: -15upx;
						right: -15upx;
					}

				}

				.text {
					width: 208upx;
					height: 66upx;
					font-size: 26upx;
					color: rgba(130, 113, 239, 100);
					line-height: 40upx;
				}
			}

		}

		.message {
			margin-top: 40upx;

			.my_data {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 140upx;
				border-radius: 20upx;
				background-color: rgba(255, 255, 255, 100);
				border: 2upx solid rgba(176, 166, 255, 0.20);
				padding: 32upx 30upx 32upx 40upx;
				color: rgba(0, 0, 0, 0.35);
				font-size: 22upx;
				margin-bottom: 20upx;

				.title {
					view:first-child {
						color: rgba(0, 0, 0, 0.8);
						font-size: 28upx;
						font-weight: 600;
						margin-bottom: 4upx;
					}
				}

				image {
					width: 40upx;
					height: 40upx;
				}
			}
		}
	}
</style>
